<!-- 自定义下拉刷新与上拉加载演示(vue) -->
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import mode from '@/components/custom-nomore/index.vue'
import custom from '@/components/custom-refresher/index.vue'

definePage({
  name: 'list',
  layout: 'tabbar',
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '列表',
  },
})

const pagingRef = ref<any>(null)
const tab = ref('未完成')
const tabList = ref([
  {
    name: '已完成',
  },
  {
    name: '未完成',
  },
])
// v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
const dataList = ref<any[]>([])

function handleClick(index) {
  console.log(index)
  // 当切换tab或搜索时请调用组件的reload方法，请勿直接调用：queryList方法！！
  pagingRef.value?.reload(true)
}

// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用paging.value.reload()即可
function queryList(pageNo, pageSize) {
  // 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
  // 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
  // 模拟请求服务器获取分页数据，请替换成自己的网络请求
  // 生成1-5秒随机延迟（含边界值）
  const delay = 500
  setTimeout(() => {
    console.log(pageNo, pageSize)
    pagingRef.value.complete(
      Array.from({ length: Math.floor(Math.random() * 30) + 1 }, () => ({
        title: Math.floor(Math.random() * 100) + 1,
      })),
    )
  }, delay)
}

// function queryList(pageNo, pageSize) {
//   const list = []
//   for (let i = 0; i < 20; i++) {
//     list.push({
//       title: Math.floor(Math.random() * 100) + 1,
//     })
//   }
//   pagingRef.value.complete(list)
// }
</script>

<template>
  <view class="content">
    <z-paging
      ref="pagingRef"
      v-model="dataList"
      :fixed="false"
      :show-refresher-when-reload="true"
      :refresher-complete-delay="1000"
      @query="queryList"
    >
      <!-- 需要固定在顶部不滚动的view放在slot="top"的view中，如果需要跟着滚动，则不要设置slot="top" -->
      <!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
      <template #top>
        <PageNav title="下拉刷新与上拉加载" />
        <wd-tabs v-model="tab" @click="handleClick">
          <block v-for="item in tabList" :key="item">
            <wd-tab :title="item.name" :name="item.name" />
          </block>
        </wd-tabs>
      </template>
      <!-- 自定义下拉刷新view(如果use-custom-refresher为true且不设置下面的slot="refresher"，此时不用获取refresherStatus，会自动使用z-paging自带的下拉刷新view) -->
      <!-- 注意注意注意！！字节跳动小程序中自定义下拉刷新不支持slot-scope，将导致custom-refresher无法显示 -->
      <!-- 如果是字节跳动小程序，请参照sticky-demo.vue中的写法，此处使用slot-scope是为了减少data中无关变量声明，降低依赖 -->
      <template #refresher="{ refresherStatus }">
        <!-- 此处的custom-refresh为demo中自定义的组件，非z-paging的内置组件，请在实际项目中自行创建。这里插入什么view，下拉刷新就显示什么view -->
        <custom :status="refresherStatus" />
      </template>
      <!-- 自定义没有更多数据view -->
      <template #loadingMoreNoMore>
        <!-- 此处的custom-nomore为demo中自定义的组件，非z-paging的内置组件，请在实际项目中自行创建。这里插入什么view，没有更多数据就显示什么view -->
        <mode />
      </template>

      <!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
      <view v-for="(item, index) in dataList" :key="index" class="item">
        <view class="item-title text-base">
          {{ item.title }}
        </view>
        <view class="item-detail">
          {{ item.detail }}
        </view>
        <view class="item-line" />
      </view>
    </z-paging>
  </view>
</template>

<style>
.content {
  height: calc(100vh - var(--window-top) - var(--window-bottom) - 50px);
}

.item {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0rpx 30rpx;
  height: 150rpx;
}

.item-detail {
  padding: 5rpx 15rpx;
  font-size: 28rpx;
  color: white;
  background-color: #007aff;
  border-radius: 10rpx;
}

.item-line {
  position: absolute;
  bottom: 0rpx;
  left: 0rpx;
  width: 100%;
  height: 1px;
  background-color: #eee;
}
</style>
